<template>
  <div class="app">
    <div class="listLeft" style="width: 305px;padding-bottom:20px">
      <listAndTool
        ref="listAndTool"
        @getDetail="getDetail"
        :editer="editer"
        :book="book"
      ></listAndTool>
    </div>
    <div class="content">
      <!-- <router-view :buttonTrue='buttonTrue' :FnEvent="FnEvent" :chapterMess='chapterMess' @refreshFn="refreshFn" @getEditer='getEditer'  :titleBtrue='titleBtrue'/> -->
      <writerContent
        ref="writerContent"
        :buttonTrue="buttonTrue"
        :draftOrSend ='draftOrSend'
        :chapterMess="chapterMess"
        @refreshFn="refreshFn"
        @getEditer="getEditer"
        :titleBtrue="titleBtrue"
      ></writerContent>
    </div>
  </div>
</template>
 
<script>
import listAndTool from "./listAndTool.vue";
import writerContent from "./writerContent.vue";
export default {
  name: "writeTool",
  data() {
    return {
      leaveRouteVisi: false,
      goNext: false,
      titleBtrue: false,
      editer: "",
      draftOrSend:'',
      buttonTrue: "", //写文章按钮组件显示
      chapterMess: {
        bookId: "",
        title: "",
        contentId: "",
        content: "",
        contentType: 0,
        wordsCount: "",
      },
      book: {
        type: 1,
        name: "",
        detail: "",
      },
    };
  },
  beforeRouteLeave(to, from, next) {//离开拦截
    this.$confirm(this.$t('home.sureLeave'), this.$t('home.tips'), {
      confirmButtonText: this.$t('home.confirm'),
      cancelButtonText: this.$t('home.cancel'),
      type: "warning",
    }).then(() => {
      next();
    });
  },
  components: {
    listAndTool,
    writerContent,
  },
  methods: {
    getDetail(data) {
      this.chapterMess = data[0]; //章节内容
      this.titleBtrue = data[1]; //章节标题可否编辑
      this.buttonTrue = data[2]; //章节状态
      this.draftOrSend = data[3]//判断走 新建草稿，还是修改草稿接口  0：修改草稿 1：新建草稿
    },
    //获取编辑器对象
    getEditer(data) {
      this.editer = data;
    },
    //刷新
    refreshFn() {
      this.$refs["listAndTool"].getDraftList();
      this.$refs["listAndTool"].getChapterList();
    },
  },
  mounted() {
    this.book.name = JSON.parse(
      sessionStorage.getItem("writeArticle")
    ).bookTitle;
  },
};
</script>

<style scoped="scoped" lang="scss">
.listLeft{
  background-color: #fff;
  border-radius: 8px;
}
.app {
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: row;
  .content {
    flex: 1;
  }
}
</style>
